<template>
	<view class="main">
		<view class="title-box">
			<view class="yellow-bar">
				<text>教学能手</text>
			</view>
		</view>
		<view class="content-box">
			<view class="content">
				<view class="computer-box"></view>
				<view class="starts-box"></view>
				<view class="flowers"></view>
				<view class="content-cen-top">
					<text class="yellow">{{data.name}}</text>
					{{ comLable.lineOne.textOne }}<br/>
					{{ comLable.lineOne.textTwo }}
					<text class="yellow">{{ data.lable}}</text>
					{{ comLable.lineOne.textThree }}<br/>
					{{ comLable.lineOne.textFour }}
				</view>
				<view class="content-cen-bottom">
					<text>{{ comLable.lineTwo.textOne }}</text><br/>
					<text>{{ comLable.lineTwo.textTwo }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import teacher from '/stateData/teacher.js'
	const { comLable } = teacher
	const data = reactive({
		name:'周韵佳',
		lable:'教学能手'
	})
</script>

<style lang="scss">
	.main{
		width: 100%;
		height: 100vh;
		background: url(http://rjinbysql.hn-bkt.clouddn.com/static/images/bg-comLable.png) no-repeat -2rpx;
		background-size: 101% 100%;
		position: absolute;
	}
	.title-box{
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 12%;
		box-sizing: border-box;
		.yellow-bar{
			width: 80%;
			height: 100%;
			background-color: rgba(255, 141, 26, 1);
			text{
				width: 100%;
				font-size: 120rpx;
				color: rgba(255, 255, 255, 1);
				letter-spacing: 30rpx;
				margin-left: 14rpx;
				position: absolute;
				bottom: 10rpx;
				font-family: '站酷快乐体';
				text-shadow: 10rpx 10rpx 0rpx rgba(121, 72, 234, 1);
			}
		}
	}
	.content-box{
		width: 100%;
		height: 50%;
		position: absolute;
		bottom: 17%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.content{
			width: 90%;
			height: 90%;
			background:url(https://img.js.design/assets/img/62c63b2579809106fef22022.png);
			background-size: 100% 100%;
			.computer-box{
				width: 366rpx;
				height: 186rpx;
				background: url(https://img.js.design/assets/img/62c63b469284437d488c5814.png) left top;
				background-size: cover;
				position: absolute;
				top: -150rpx;
			}
			.starts-box{
				width: 236rpx;
				height: 236rpx;
				background:url(https://img.js.design/assets/img/62d62917d6eb2d20bf1f79ca.png) ;
				background-size: cover;
				position: absolute;
				top: -200rpx;
				right: 40rpx;
				transform: rotate(15deg);
			}
			.flowers{
				width: 300rpx;
				height: 400rpx;
				background: url(https://img.js.design/assets/img/62d629a5b51d9f5a1ed9fb46.png);
				background-size: cover;
				transform: rotateY(180deg);
				position: absolute;
				right: 40rpx;
				bottom: -140rpx;
			}
			.content-cen-top{
				font-size: 40rpx;
				font-weight: 400;
				line-height: 70rpx;
				padding: 0 40rpx 0 40rpx;
				position: absolute;
				top: 10%;
				.yellow{
					color: rgba(255, 141, 26, 1);
				}
			}
			.content-cen-bottom{
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 4rpx;
				line-height: 56rpx;
				position: absolute;
				top: 57%;
				padding: 0 40rpx 0 40rpx;
			}
		}
	}
	
</style>